<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<base th:href="${#request.getContextPath()}+'/'">
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	</head>
	<body>
		<div id="app">

			<el-container>
				<el-aside width="200px" style="text-align: left;">
					<el-row class="tac" >
						<el-col :span="24" >
							<el-menu class="el-menu-vertical-demo" background-color="#545c64"
							 text-color="#fff" active-text-color="#ffd04b">
								
								<el-menu-item index="1">
									<el-avatar :src="url"></el-avatar>
									<span style="color: #EEEEEE;padding-left: 20px;">{{form.username}}</span> 
								</el-menu-item>
								<el-menu-item index="2">
									<i class="el-icon-edit"></i>
									<span @click="control()">Dashboard</span>
								</el-menu-item>
								<el-menu-item index="3">
									<i class="el-icon-document"></i>
									<span slot="title">发布博客</span>
								</el-menu-item>
								<el-menu-item>
									<span slot="title">管理模块</span>
								</el-menu-item>
								<el-menu-item index="4">
									<i class="el-icon-setting"></i>
									<span slot="title">博客管理</span>
								</el-menu-item>
								<el-menu-item index="5">
									<i class="el-icon-setting"></i>
									<span slot="title">评论管理</span>
								</el-menu-item>
								<el-menu-item index="6">
									<i class="el-icon-setting"></i>
									<span slot="title">分类管理</span>
								</el-menu-item>
								<el-menu-item index="7">
									<i class="el-icon-setting"></i>
									<span slot="title">标签管理</span>
								</el-menu-item>
								<el-menu-item index="8">
									<i class="el-icon-setting"></i>
									<span slot="title">友情链接</span>
								</el-menu-item>
								<el-menu-item>
									<span slot="title">系统管理</span>
								</el-menu-item>
								<el-menu-item index="9">
									<i class="el-icon-setting"></i>
									<span slot="title">系统配置</span>
								</el-menu-item>
								<el-menu-item index="10">
									<i class="el-icon-setting"></i>
									<span slot="title">修改密码</span>
								</el-menu-item>
								<el-menu-item index="11">
									<i class="el-icon-setting"></i>
									<span slot="title">安全退出</span>
								</el-menu-item>
							</el-menu>
						</el-col>
					</el-row>
				</el-aside>
				<el-container>
					<el-header>
						<el-button type="primary" @click="dialogFormVisible = true">登录</el-button>
						<el-button type="primary" @click="dialogFormVisible = true">注册</el-button>
					</el-header>
					<el-main>
						<div id="content" style="width: 800px; height: 600;">
							
						</div>
					</el-main>
				</el-container>
			</el-container>


			<el-dialog title="登录" width="30%" center :visible.sync="dialogFormVisible">
				<el-form :model="form">
					<el-form-item label="账号" :label-width="formLabelWidth">
						<el-input v-model="form.username" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="密码" :label-width="formLabelWidth">
						<el-input v-model="form.password" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogFormVisible = false">登 录</el-button>
				</div>
			</el-dialog>
		</div>
	</body>
	<script>
		var vue = new Vue({
			el: '#app',
			data: {
				url: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
				dialogFormVisible: false,
				form: {
					username: '周坤',
					password: ''
				},
				formLabelWidth: '50px'
			},
			methods: {
				handleClose(done) {
					this.$confirm('确认关闭？')
						.then(_ => {
							done();
						})
						.catch(_ => {});
				},
				wirteBlog() {
					alert(1);
				},
				control(){
					$("#content").load("/login");
				}
			}
		})
	</script>
	<style>
		body {
			margin: 0;
		}

		.el-header,
		.el-footer {
			background-color: #B3C0D1;
			color: #333;
			text-align: right;
			line-height: 60px;
		}

		.el-aside {
			background-color: #D3DCE6;
			color: #333;
			text-align: center;
			line-height: 200px;
		}

		.el-main {
			background-color: #E9EEF3;
			color: #333;
			text-align: center;
			line-height: 780px;
		}

		body>.el-container {
			margin-bottom: 40px;
		}

		.el-container:nth-child(5) .el-aside,
		.el-container:nth-child(6) .el-aside {
			line-height: 260px;
		}

		.el-container:nth-child(7) .el-aside {
			line-height: 320px;
		}
	</style>
</html>
